<template>
  <div class="container">
    <el-card>
      <div class="el-form-item">
        <el-form :inline="true" class="demo-form-inline el-col-22">
          <el-form-item ref="fromRef" size="small " label="学科名称">
            <el-input size="small" v-model="query.subjectName"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button size="small" @click="clear">清除</el-button>
            <el-button size="small" type="primary" @click="search"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        <el-button
          class="el-icon-edit"
          size="small "
          justify="end"
          type="success"
          @click="openD()"
          >新增学科</el-button
        >
      </div>
      <div>
        <el-alert :title="`数据一共${total}条`" type="info" show-icon>
        </el-alert>
      </div>
      <div>
        <el-table :data="subList">
          <el-table-column
            label="序号"
            type="index"
            width="50px"
          ></el-table-column>
          <el-table-column
            label="学科名称"
            prop="subjectName"
          ></el-table-column>
          <el-table-column label="创建者" prop="username"></el-table-column>
          <el-table-column label="创建日期" prop="addDate">
            <template #default="{ row }"
              >{{ row.addDate | parseTimeByString }}
            </template>
          </el-table-column>
          <el-table-column label="前台是否显示" prop="isFrontDisplay">
            <template #default="{ row }">
              {{ row.isFrontDisplay | setDisplay }}
            </template>
          </el-table-column>
          <el-table-column
            label="二级目录"
            prop="twoLevelDirectory"
          ></el-table-column>
          <el-table-column label="标签" prop="tags"></el-table-column>
          <el-table-column label="题目数量" prop="totals"></el-table-column>
          <el-table-column label="操作" width="250px">
            <template #default="{ row }">
              <el-button
                type="text"
                @click="
                  $router.push(
                    `directorys?id=${row.id}&name=${encodeURIComponent(
                      row.subjectName
                    )}`
                  )
                "
                >学科分类</el-button
              >
              <el-button
                type="text"
                @click="
                  $router.push(
                    `tags?id=${row.id}&name=${encodeURIComponent(
                      row.subjectName
                    )}`
                  )
                "
                >学科标签</el-button
              >
              <el-button size="small" type="text" @click="openD(row)">
                <span>修改</span></el-button
              >
              <el-button size="small" type="text" @click="dle(row)"
                ><span>删除</span></el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <el-row type="flex" class="row-bg" justify="end">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-row>
      </div>
    </el-card>
    <SubJects
      :data="subjectArr"
      @updateList="updateList()"
      ref="subRef"
    ></SubJects>
  </div>
</template>

<script>
import { list, remove } from '../../api/hmmm/subjects'
import SubJects from '../components/subjects-add.vue'

export default {
  components: {
    SubJects
  },
  data () {
    return {
      query: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      subList: [],
      subjectArr: {},
      total: '',
      currentPage: 1,
      dialogVisible: false,
      value: true
    }
  },
  created () {
    this.getsubList()
  },
  methods: {
    openD (subject) {
      this.subjectArr = subject || {}
      this.$nextTick(() => {
        this.$refs.subRef.open()
      })
    },

    updateList () {
      if (!this.subjectArr.id) {
        this.query.page = 1
      }
      this.getsubList()
    },
    search () {
      this.query.page = 1
      this.getsubList()
    },

    // 获取列表 从新渲染
    async getsubList () {
      const { data } = await list(this.query)
      this.subList = data.items
      this.total = data.counts
      // console.log(data)
    },
    // 更改条数 刷新页面
    handleSizeChange (newSize) {
      console.log(newSize)
      this.query.pagesize = newSize
      this.getsubList()
    },
    // 更改页数 刷新页面
    handleCurrentChange (newPage) {
      this.query.page = newPage
      this.getsubList()
    },
    // 删除学科
    async dle (data) {
      const res = await this.$confirm(
        '此操作将永久删除该学科, 是否继续?',
        '提示',
        {
          type: 'warning'
        }
      ).catch(() => {})

      if (res === 'confirm') {
        await remove(data)
      }
      if (this.subList.length === 1 && this.query.page > 1) {
        this.query.page--
      }
      console.log(this.page)
      this.getsubList()
    },
    addSubFn () {
      this.getsubList()
    },
    // 清除按键
    clear () {
      this.query = {
        page: 1,
        pagesize: 10,
        subjectName: ''
      }
    }
  },
  // 自定义过滤器
  filters: {
    setDisplay (val) {
      return val === 1 ? '是' : '否'
    }
  }
}
</script>

<style scoped lang="scss">
.container {
  margin: 10px 0;
  padding: 0 11px;
}
.el-icon-edit {
  text-align: right;
  margin-left: 45px;
}
.show {
  margin-top: 20px;
}
</style>
